<template>
  <el-dialog
    width="1100"
    title="每餐饮食详情"
    v-model="visible"
    draggable
    class="dialog"
    @close="closeDialog"
  >
    <el-form :model="formParams" ref="formRef" :inline="true">
      <el-form-item label="选择时间区间" prop="time">
        <el-date-picker
          v-model="formParams.time"
          type="daterange"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm"
          range-separator="~"
          date-format="YYYY-MM-DD"
          time-format="HH:mm"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="用户账号" align="center" prop="mobile" />
      <el-table-column label="下单时间" align="center" prop="orderTime" width="180" />
      <el-table-column label="取餐时间" align="center" prop="createTime" width="180" />
      <el-table-column label="餐次" align="center" prop="meals" width="180" />
      <el-table-column label="餐品名称" align="center" prop="comboName" />
      <el-table-column label="餐品克重" align="center" prop="weight" />
      <el-table-column label="热量 kcal" align="center" prop="kcal" />
    </el-table>

    <div style="margin-right: 50px; position: relative">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="formParams.pageNum"
        v-model:limit="formParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import { postHealthInfoApi } from '@/api/nutrition/userCalories'

const visible = ref(false)
const loading = ref(false)
const total = ref(0)
const formRef = ref(null)
const formParams = ref({
  pageNum: 1,
  pageSize: 10,
  time: [],
  clientId: null
})
const list = ref([])
function handleSearch(type) {
  !type && formRef.value.resetFields()
  getList()
}
/**获取工单完成时间 */
function getTimePeriod(timestamp) {
  const date = new Date(timestamp)
  const hours = date.getHours()
  console.log(hours)
  if (hours >= 0 && hours < 10) {
    return '早餐 (24点~10点前取餐)'
  } else if (hours >= 10 && hours < 15) {
    return '午餐 (10点~15点取餐)'
  } else if (hours >= 15 && hours < 24) {
    return '晚餐 (15点~24点取餐)'
  }
}
function getList() {
  loading.value = true
  const param = {
    ...formParams.value,
    startTime: formParams.value.time[0] ? formParams.value.time[0] : null,
    endTime: formParams.value.time[1] ? formParams.value.time[1] : null
  }
  delete param.time
  postHealthInfoApi(param)
    .then((res) => {
      total.value = res.total || 0
      list.value = res.rows.map((i) => ({
        ...i,
        ...(i.createTime ? { meals: getTimePeriod(i.createTime) } : {})
      }))
    })
    .finally(() => {
      loading.value = false
    })
}
function init(row) {
  visible.value = true
  formParams.value.clientId = row.clientId
  getList()
}

function closeDialog() {
  formRef.value.resetFields()
}
defineExpose({
  init
})
const emit = defineEmits(['closeDialog'])
</script>
<style lang="scss" scoped></style>
